<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="title">
                TimeTable Detail
            </ui:define>

            <ui:define name="content">
                <f:metadata>
                    <f:viewParam name="timeid" value="#{timeTableDetailBean.id}" />
                </f:metadata>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $('#edit').hide();
                    });
                    $(document).ready(function(){
                        $('#btne').click(function(){
                            $('#edit').show();
                            $('#detail').hide();
                        });
                    });
                    $(document).ready(function(){
                        if($('#start').val()==""||$('#end').val()==""||$('#desc').val()==""){
                            $('#edit').show();
                            $('#detail').hide();
                        }
                    });
                </script>
                <h:form>
                    <div id="detail">
                        <table align="center" width="500px">
                            <tr>
                                <td colspan="2" align="center"><h3>TimeTable Detail</h3></td>
                            </tr>
                            <tr>
                                <td colspan="2"><p:messages id="messages" showDetail="true" autoUpdate="true"  globalOnly="true"/></td>
                            </tr>
                            <tr>
                                <td>Lab Name</td>
                                <td>#{timeTableDetailBean.time.labID.labname}</td>
                            </tr>
                            <tr>
                                <td>Username</td>
                                <td>#{timeTableDetailBean.time.userID.username}</td>
                            </tr>
                            <tr>
                                <td>Start Time</td>
                                <td>
                                    <h:outputText value="#{timeTableDetailBean.time.startTime}">
                                        <f:convertDateTime pattern="HH:mm a" timeZone="GMT+7" />
                                    </h:outputText>
                                </td>
                            </tr>
                            <tr>
                                <td>End Time</td>
                                <td>
                                    <h:outputText value="#{timeTableDetailBean.time.endTime}">
                                        <f:convertDateTime pattern="HH:mm a" timeZone="GMT+7" />
                                    </h:outputText>
                                </td>
                            </tr>
                            <tr>
                                <td>Description</td>
                                <td>#{timeTableDetailBean.time.description}</td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center"><input type="button" value="Edit Time" id="btne" /></td>
                            </tr>
                        </table>
                    </div>
                    <div id="edit">
                        <table align="center" width="600px">
                            <tr>
                                <td colspan="2" align="center"><h3>Edit TimeTable</h3></td><td></td>
                            </tr>
                            <tr>
                                <td>Lab Name</td>
                                <td>
                                    <h:selectOneMenu value="#{timeTableDetailBean.labid}">
                                        <f:selectItems value="#{timeTableDetailBean.labs}" var="t" itemLabel="#{t.labname}" itemValue="#{t.labID}" />
                                    </h:selectOneMenu>
                                </td><td></td>
                            </tr>
                            <tr>
                                <td>Username</td>
                                <td>
                                    <h:selectOneMenu value="#{timeTableDetailBean.userid}">
                                        <f:selectItems value="#{timeTableDetailBean.users}" var="u" itemLabel="#{u.username}" itemValue="#{u.userID}" />
                                    </h:selectOneMenu>
                                </td><td></td>
                            </tr>
                            <tr>
                                <td>Start Time</td>
                                <td>
                                    <p:calendar id="start" value="#{timeTableDetailBean.start}" pattern="HH:mm" timeOnly="true" required="true" requiredMessage="Choice Time !" effect="explode" />
                                </td>
                                <td><p:message for="start" /></td>
                            </tr>
                            <tr>
                                <td>End Time</td>
                                <td>
                                    <p:calendar id="end" value="#{timeTableDetailBean.end}" pattern="HH:mm" timeOnly="true" required="true" requiredMessage="Choice Time !" effect="explode" />
                                </td>
                                <td><p:message for="end" /></td>
                            </tr>
                            <tr>
                                <td>Description</td>
                                <td><h:inputTextarea id="desc" value="#{timeTableDetailBean.description}" required="true" requiredMessage="Description invalid !" /></td>
                                <td><p:message for="desc" /></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center"><h:commandButton value="Change Time" action="#{timeTableDetailBean.resultEdit}" /></td>
                            </tr>
                        </table>
                    </div>
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
